<template>
  <el-card style="margin: 24px;" shadow="never">

    <!-- <div slot="header" class="clearfix">
      <span>定义管理</span>
    </div> -->

    <el-dialog title="查看图片" :visible.sync="imgShow" center>
      <span style="width: 100%;" element-loading-background="rgba(0, 0, 0, 0.3)">
        <transition name="fade" mode="out-in">
          <img v-show="!imgLoading" ref="img" style="heigth: 100%; width: 100%;" :src="imageUrl" @load="loadImg">
        </transition>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="imgShow = false">取 消</el-button>
        <el-button type="primary" @click="imgShow = false">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="查看XML" :visible.sync="xmlShow" center>
      <span>
        <el-input v-model="xmlText" :autosize="{ maxRows: 20}" type="textarea" />
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="xmlShow = false">取 消</el-button>
        <el-button type="primary" @click="xmlShow = false">确 定</el-button>
      </span>
    </el-dialog>

    <!-- <el-upload action="/" multiple style="display: inline-block;">
      <el-button type="primary" icon="el-icon-upload2">导入模板</el-button>
    </el-upload>
    <el-button type="primary" icon="el-icon-plus" @click="newModel">新建</el-button> -->

    <br>
    <br>

    <el-form :inline="true" :model="formInline">
      <el-form-item label="名称">
        <el-input v-model="formInline.name" placeholder="名称" />
      </el-form-item>
      <el-form-item label="key">
        <el-input v-model="formInline.modelKey" placeholder="key" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getList()">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="tableData" style="width: 100%">
      <el-table-column label="操作" width="300">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="processFileXml(scope.row.id)">查看XML</el-button>
          <el-button size="mini" type="text" @click="processFileImg(scope.row.id)">查看图片</el-button>
          <!-- <el-popconfirm title="确认挂起?" @onConfirm="saDefinitionById(scope.row.id, '1')">
            <el-button slot="reference" size="mini" type="text">挂起</el-button>
          </el-popconfirm> -->
          <template v-if="scope.row.suspensionState == 1">
            <el-popconfirm
              title="确认挂起?"
              @onConfirm="saDefinitionById(scope.row.id, '1')"
            >
              <el-button slot="reference" size="mini" type="text">挂起</el-button>
            </el-popconfirm>
          </template>
          <template v-if="scope.row.suspensionState == 2">
            <el-popconfirm
              title="确认激活?"
              @onConfirm="saDefinitionById(scope.row.id, '2')"
            >
              <el-button slot="reference" size="mini" type="text">激活</el-button>
            </el-popconfirm>
          </template>

          <el-popconfirm title="确认删除?" @onConfirm="deleteDeployment(scope.row.deploymentId)">
            <el-button slot="reference" size="mini" type="text">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
      <el-table-column label="名称">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="key">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.modelKey }}</span>
        </template>
      </el-table-column>
      <el-table-column label="版本">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.version }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="系统">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.tenantId }}</span>
        </template>
      </el-table-column> -->
    </el-table>

    <el-pagination
      style="margin-top: 16px;"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-card>
</template>

<script>
import { fetchList, saDefinitionById, processFileXml, deleteDeployment } from '@/api/definition'

export default {
  name: 'EngineDefintion',
  data() {
    return {

      currentPage: 0,
      total: 40,
      pageSize: 10,

      tableData: [],

      imgShow: false,
      imageUrl: '',
      xmlShow: false,
      xmlText: '',
      imgLoading: true,

      formInline: {
        name: '',
        modelKey: ''
      },

      loading: true

    }
  },

  created() {
    this.getList()
  },
  methods: {

    loadImg() {
      this.imgLoading = false
    },

    deleteDeployment(id) {
      deleteDeployment({
        deploymentId: id
      }).then(response => {
        if (response.code === '100') {
          this.$message({
            showClose: true,
            message: response.msg,
            type: 'success'
          })
        } else {
          this.$message({
            showClose: true,
            message: response.msg,
            type: 'error'
          })
        }
        this.getList()
      })
    },

    processFileImg(id) {
      this.imgLoading = true
      const tmpImageUrl = process.env.VUE_APP_BASE_API + '/rest/definition/processFile/img/' + id + '?t=' + Date.parse(new Date())
      if (tmpImageUrl === this.imageUrl) {
        this.imgLoading = false
      } else {
        this.imageUrl = process.env.VUE_APP_BASE_API + '/rest/definition/processFile/img/' + id + '?t=' + Date.parse(new Date())
      }
      this.imgShow = true

      // processFileImg(modelId).then(response => {
      //   console.log(response)
      //   this.imageUrl = response
      //   this.imgShow = true
      // })
    },

    processFileXml(id) {
      processFileXml(id).then(response => {
        this.xmlText = response
        this.xmlShow = true
      })
    },

    saDefinitionById(id, status) {
      saDefinitionById({
        id: id,
        suspensionState: status
      }).then(response => {
        if (response.code === '100') {
          this.$message({
            showClose: true,
            message: response.msg,
            type: 'success'
          })
        } else {
          this.$message({
            showClose: true,
            message: response.msg,
            type: 'error'
          })
        }
        this.getList()
      })
    },

    handleSizeChange(val) {
      this.pageSize = val
      const query = {
        pageNum: 0,
        pageSize: val
      }
      this.getList(query)
    },

    handleCurrentChange(val) {
      const query = {
        pageNum: val,
        pageSize: this.pageSize
      }
      this.getList(query)
    },

    newModel() {
      this.$router.push('/engine/model-new')
    },

    getList(query) {
      this.loading = true

      if (typeof query === 'undefined') {
        query = {
          pageNum: this.currentPage,
          pageSize: this.pageSize
        }
      }

      Object.assign(query, this.formInline)

      fetchList(query).then(response => {
        this.tableData = response.data
        this.total = response.total
        this.loading = false
      }).catch((e) => {
        console.error(e)
        this.loading = false
      })
    }
  }
}

</script>
<style lang='scss' scoped>
</style>
